<template>
  <view class="whf oh x classify">
    <scroll-view class="left nbx hf" scroll-y>
      <view class="wf y jc box">
        <view v-for="(i, ii) in types" :key="ii" @click="typeClick(i)"
          :class="['label', 'wf', 'xcc', type == i.id ? 'active' : '']">
          {{ i.name }}
        </view>
      </view>
    </scroll-view>
    <view class="fg1 right oh">
      <scroll-view class="whf" scroll-y scroll-with-animation enable-back-to-top @scrolltolower="fetch"
        @refresherrefresh="init" refresher-enabled :refresher-triggered="triggered">
        <view class="wf y p04em">
          <goods-item class="wf" v-for="(i, ii) in pages.data" :key="ii" :modelValue="i" row :cartAdd="true" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script lang="ts">
  import GoodsItem from "@/components/GoodsItem.vue";

  import { defineComponent } from "vue";
  export default defineComponent({
    name: "classify",
    components: { GoodsItem },
    // props: {modelValue:{type:Object,default(){return {};}}},
    // watch:{modelValue:{handler(n,o){this.init();},deep:true}},
    data() {
      return {
        types: [] as gt.sql.goodsType[],
        pages: { current: 0, size: 10, total: 0, data: [] } as gt.PageData<gt.sql.goods>,
        type: "",
        freshing: true,
        triggered: false,
      };
    },
    // computed:{},
    onLoad() { this.init(); },
    // created() { this.init(); },
    // async onPullDownRefresh() { this.init(); },
    methods: {
      async init() {
        this.pages.current = 0;
        this.freshing = true;
        await this.fetch();
        this.types = (gd.goodsType.length ? gd.goodsType : await gd.goodsType.read()).map(e => e);
        this.types.unshift({ id: "", name: "全部" } as any);
      },
      async fetch() {
        this.triggered = true;
        if (this.freshing) {
          const
            c = ++this.pages.current,
            rules: gt.Rp<gt.sql.goods> = { "#page": { current: c, size: this.pages.size }, "#order": [["createTime", "DESC"]], type: this.type ? this.type : undefined } as any;
          const r = await gd.goods.read(rules);
          if (c > 1) {
            this.pages.data.push(...r.data);
          } else {
            this.pages = r;
          }
          this.freshing = this.pages.data.length < r.total;
        }
        uni.stopPullDownRefresh();
        await this.$nextTick();
        this.triggered = false;
      },
      typeClick(type: gt.sql.goodsType) {
        this.type = type.id;
        this.init();
      }
    },
    // mounted() { },
  });
</script>
<style lang="scss" scoped>
  .classify {
    position: relative;
    .left {
      width: 7em;
      background-color: #F4F4F4;
      .box>.active {
        background-color: #FFFFFF;
        position: relative;
        z-index: 1;
      }
      .box>.active::after {
        content: "";
        top: calc(50% - 1em);
        left: 0;
        position: absolute;
        width: .2em;
        height: 2em;
        border-radius: 0 5px 5px 0;
        background-color: red;
        z-index: 999;
      }
      .label {
        height: 3em;
        background-color: #F4F4F4;
        font-size: .8em;
      }
    }
    .right {
      background-color: #FFFFFF;
    }
  }
</style>